<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="layout :: htmlhead" th:with="title='轮播图管理'"></head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <!--头-->
        <div th:replace="fragments/head :: header"></div>

        <div class="layui-body" style="margin: 1%">
            <!--搜索框Form-->
            <form id="userSearch" class="layui-form layui-form-pane" method="post" action="" style="margin-top: 20px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">轮播图名称</label>
                    <div class="layui-input-inline">
                        <input name="imgName" autocomplete="off" class="layui-input" type="text"/>
                    </div>
                </div>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <button class="layui-btn"  lay-submit="" lay-filter="searchSubmit">提交</button>
            </form>

            <!--水平线颜色-->
            <!--<hr class="layui-bg-blue"/>-->
            <hr class="layui-bg-black"/>

            <button class="layui-btn layui-btn-normal" onclick="addCarousel()">新增轮播图</button>

            <table id="uesrList" lay-filter="userTable"></table>
            <div style="display:none;" id="currentUser"><shiro:principal property="id"></shiro:principal></div>

            <script type="text/html" id="optBar">
    <!--            <a class="layui-btn layui-btn-xs" lay-event="select">查看</a>-->
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </div>


        <!--添加或编辑轮播图-->
        <div id="setCarousel" class="layer_self_wrap" style="width:500px;display:none;height: 400px">
            <form id="carouselForm" class="layui-form layui-form-pane" method="post" action="" style="margin-top: 20px;">
                <input id="id" type="hidden" name="id"/>
                <div class="layui-form-item">
                    <label class="layui-form-label">图片名称</label>
                    <div class="layui-input-inline">
                        <input id="imgName" name="imgName" lay-verify="required" autocomplete="off" class="layui-input" type="text"/>
                    </div>
                </div>

                <!--隐藏的文本框(value为图片上传成功返回的图片url地址)-->
                <input type="hidden" name="imgUrl" id="imgUrl" class="image"/>

                <div class="layui-form-item">
                <label class="layui-form-label ">照片:</label>
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="test1">上传图片</button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="demo1" style="width: 500px;height: 300px;display: none" />
                            <p id="demoText"></p>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin-left: 10px;">
                        <button class="layui-btn"  lay-submit="" lay-filter="userSubmit">提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>

        <!--底部-->
        <div th:replace="fragments/footer :: footer"></div>
        <script src="/js/dateUtils.js"></script>
        <script src="/js/carousel/carouselList.js"></script>
        <!--图片上传script-->
        <script>
            layui.use('upload', function(){
                var $ = layui.jquery
                    ,upload = layui.upload;

                //普通图片上传
                var uploadInst = upload.render({
                    elem: '#test1'
                    ,url: '/carousel/uploadImg' //改成您自己的上传接口
                    ,before: function(obj){
                        //预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result){
                            $('#demo1').attr('src', result); //图片链接（base64）
                        });
                    }
                    ,done: function(res){
                        //如果上传失败
                        if(res.code > 0){
                            return layer.msg('上传失败');
                        }
                        //上传成功
                        console.log("res=")
                        console.log(res)
                        var demoText = $('#demoText');
                        demoText.html('<span style="color: #4cae4c;">上传成功</span>');
                        $("#demo1").show();

                        //返回的图片url 赋值给隐藏的文本框
                        var fileupload = $(".image");
                        fileupload.attr("value",res.data.src);

                    }
                    ,error: function(){
                        //演示失败状态，并实现重传
                        var demoText = $('#demoText');
                        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                        demoText.find('.demo-reload').on('click', function(){
                            uploadInst.upload();
                        });
                    }
                });
            });
        </script>
    </div>
</body>
</html>